<template>
  <!--yz_pay 包括支付需要的弹窗和消费红包弹窗-->
  <div style="margin-bottom: 3rem;">
    <template v-if="payType">
      <van-radio-group v-model="radio" @change="radioChange">

      <div class="mod_btns" v-for="(btn, i) in payType" :key="i" v-show="!popupSpecs">
        <a class="mod_btn" @click.stop="clickPayRadio(btn)">
          <i class="iconfont" :class="getIconUrl(btn)"></i>
          <div v-if="btn.value == 3 || btn.value == 111" style="display: flex; flex-direction: column;">
            <span>{{ btn.name }}</span>
            <span v-if="btn.other && btn.other.usable">可用:<span style="color: #f76d6d;">{{btn.other.usable}}</span>{{ $i18n.t('元') }}</span>
          </div>
          <span v-if="btn.value != 59 && btn.value != 71 && btn.value != 3 && btn.value != 111 && btn.value != 80 " >{{ btn.name }}{{ typename }}</span>
          <span v-if="(btn.value == 59 || btn.value == 71) && btn.value != 3 && btn.value != 111 && btn.value != 80" >{{ btn.name }}</span>
          <div v-if="btn.value == 80" style="display: flex; flex-direction: column;">
            <span>{{ btn.name }}</span>
            <span v-if="balanceNum_store">可用:<span style="color: #f76d6d;">{{balanceNum_store}}</span>{{ $i18n.t('元') }}</span>
          </div>
          <span v-if="btn.value == 103 && radioCurrency && radioCurrency.currency_name">（{{ radioCurrency.currency_name }}）</span>
          </a>
        <van-radio :name="btn.value" checked-color="#f15353"></van-radio>
      </div>
      </van-radio-group>

    </template>
    <div v-if="this.payType.length!==0" @click="submit" class="newSubTn" :class="[fun.getPhoneEnv() == 3 ? 'pcStyle' : '']">立即支付</div>
    <pay-keyboard :payKeyboardShow.sync="popupSpecs" @complete="onInput" @close="changePopupSpecs"></pay-keyboard>

    <van-popup v-model="showQR" :style="{ width: '80%' }">
      <img style="width: 15rem; height: 15rem; padding: 1rem;" :src="qrcode" alt=""/>
      <p style="font-weight: bold; font-size: 16px; padding-bottom: 0.5rem;">请用微信识别二维码支付</p>
    </van-popup>

    <van-popup v-model="showZFBQR" :style="{ width: '80%' }">
      <div v-show="isZFBQR">
        <canvas id="qrccode-canvas"></canvas>
        <p style="font-weight: bold; font-size: 16px; padding-bottom: 0.5rem;">请用支付宝识别二维码支付</p>
      </div>
      <p v-show="!isZFBQR" style="font-weight: bold; font-size: 16px; padding: 3rem;">正在为您生成二维码中，请稍后...</p>
    </van-popup>

    <div id="alipay-detail" v-if="alipayShow">
      <div class="bg">
        <img src="../../assets/images/alipay-bg.png" alt=""/>
      </div>
    </div>

    <!--消费红包-->
    <van-overlay :show="showPacket" @click="closePacket">
      <div class="wrapper">
        <div class="block" @click.stop>
          <img @click="toPacket" src="../../assets/images/consume_packet.png"/>
        </div>
      </div>
    </van-overlay>

    <van-popup v-model="walletCurrencyShow" round closeable :style="{ width: '85%' }">
      <van-nav-bar title="选择支付币种"></van-nav-bar>
      <van-radio-group v-model="radioCurrency" class="wallet-currency-group" @change="changeRadioCurrency">
        <van-cell-group v-for="item in walletCurrency" :key="item.currency">
          <van-cell :title="item.currency_name" clickable @click="radioCurrency = item" :border='false'>
            <template #right-icon>
              <van-radio :name="item" checked-color="#ee0a24"/>
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group>
      <van-button type="danger" block @click="submit">立即支付</van-button>
    </van-popup>

    <van-popup v-model="isShowCodeQRPay" round :style="{ width: '70%',left: '50%' }" @close='closeCodeQRPay'>
      <div v-show="isCodeQRPay">
        <canvas id="qrPay-canvas"></canvas>
        <img :src="QRPayImg" alt="">
        <p style="font-weight: bold; font-size: 16px; padding-bottom: 0.5rem;">请用{{payQRInfo.text}}识别二维码支付</p>
      </div>
      <p v-show="!isCodeQRPay" style="font-weight: bold; font-size: 16px; padding: 3rem;">正在为您生成二维码中，请稍后...</p>
    </van-popup>
  </div>
</template>

<script>
import payKeyboard from "components/payKeyboard";
import QRCode from "qrcode";
export default {
  props: ["payType", "typename", "popupSpecs", "showQR", "qrcode", "showZFBQR", "isZFBQR", "alipayShow", "showPacket","balanceNum","balanceNum_store","payTag","showCodeQRPay","order_pay_id"],
  data() {
    return {
      payarr: "",
      radio:'',
      submitArr:'',
      walletCurrencyShow: false,
      radioCurrency: null,
      isCodeQRPay: '',
      payQRInfo: {},
      isShowCodeQRPay: false
    };
  },
  components: { payKeyboard },
  mounted() {
    if(this.payType && this.payType.length > 0) {
      this.submitArr = this.payType[0];
      this.radio = this.payType[0].value;
    }
  },
  watch: {
    payType(val) {
      // 监听变化后的改动
      if(val && val.length > 0) {
        this.submitArr = val[0];
        this.radio = val[0].value;
      }
    },
    showCodeQRPay(val){
      this.isShowCodeQRPay = val;
      if(val){
        return this.getPayQR();
      }
      if(this.intervalPayQR) clearInterval(this.intervalPayQR);
    }
  },
  activated(){
    this.submitArr = '';
    this.radio = '';
  },
  methods: {
    closeCodeQRPay(){
      this.isShowCodeQRPay = false;
      this.$parent.showCodeQRPay = false;
    },
    radioChange(e){
      for(let key  in this.payType){
        if(this.payType[key].value == e){
          this.submitArr = this.payType[key];
          this.radio = this.payType[key].value;
        }
      }
      if(e == 103) {
        // 钱包app 币种
        this.getCurrency();
      }
    },

    submit() {
      this.$emit("submit", this.submitArr);
    },
    getIconUrl(item) {
      let icon_url = "";
      switch (item.code) {
      case "wechatPay":
      case "cloudPayWechat":
      case "wechatApp":
      case "yunPayWechat":
      case "wftPay":
      case "yop":
      case "convergePayWechat":
      case "WechatScan":
      case "WechatFace":
      case "WechatJsapi":
      case "wechatAggregatePay":
      case "convergePaySeparate":
      case "wechatCpsAppPay":
      case "huibeiWechatPay":
      case "wxIntegrationPay":
      case "leshuaWechat":
      case "wxIntegrationSharePay":
      case "silverPointWechat":
      case "authPay":
        icon_url = "icon-pay_wechat";
        break;
      case "alipay":
      case "cloudPayAlipay":
      case "alipayApp":
      case "yunPayAlipay":
      case "wftAlipay":
      case "convergePayAlipay":
      case "yopAlipay":
      case "AlipayScan":
      case "AlipayFace":
      case "AlipayJsapi":
      case "alipayAggregatePay":
      case "convergeAliPaySeparate":
      case "sandpayAlipay":
      case "huibeiAliPay":
      case "leshuaAlipay":
      case "zfbIntegrationPay":
      case "zfbIntegrationSharePay":
      case "silverPointAlipay":
        icon_url = "icon-pay_alipay";
        break;
      case "balance":
      case "MemberCard":
        icon_url = "icon-pay_yue";
        break;
      case "remittance":
        icon_url = "icon-pay_remittance";
        break;
      case "anotherPay":
        icon_url = "icon-pay_otherpay";
        break;
      case "UsdtPay":
        icon_url = "icon-pay_utsd";
        break;
      case "DepositPay":
        icon_url = "icon-pay_prepay";
        break;
      case "convergeQuickPay":
        icon_url = "icon-pay_quick";
        break;
      case "COD":
        icon_url = "icon-pay_cashondelivery";
        break;
      case "dcmScanPay":
        icon_url = "icon-fontclass-saomazhifu";
        break;
      case "parentPayment":
        icon_url = "icon-fontclass-daifu1";
        break;
      case "lklPay":
        icon_url = "icon-lakala";
        break;
      case "bgzchinaPay":
        icon_url = "icon-guizhouyinhangjuhezhifu"
        break;
      default:
        icon_url = "icon-pay_default";
        break;
      }
      return icon_url;
    },
    toPacket() {
      this.$router.replace(this.fun.getUrl("ConsumePacketSuccess", {}, { order_id: this.order_ids }));
    },
    closePacket() {
      this.$emit("closePacket");
    },
    changePopupSpecs(flag) {
      this.payarr = "";
      this.$emit("changePopupSpecs", false);
    },
    onInput(e) {
      // if (this.payarr.length < 6) {
      //   this.payarr = `${this.payarr}${e}`;
      //   if (this.payarr.length == 6) {
      //     this.keyboardDone(this.payarr);
      //   }
      // }
      this.keyboardDone(e);
    },
    keyboardDone(val) {
      this.$emit("changePopupSpecs", false);
      this.getVerifyPassword(val);
    },

    // 验证密码
    getVerifyPassword(pwd) {
      // order.pay.wechatPay
      $http.get("payment.password.check", { password: pwd }, "").then(
        (response) => {
          if (response.result == 1) {
            this.$emit("balancePay", pwd,this.payTag,this.radio);
          } else {
            this.$dialog
              .confirm({ message: response.msg })
              .then(() => {
                if (response.data.code == 2001) {
                  // 商城支付密码设置未开启
                  // this.$router.go(-1)
                } else if (response.data.code == 2002) {
                  // 用户未设置支付密码
                  // 去设置密码
                  this.$router.push(this.fun.getUrl("set_balance_password", {}));
                } else if (response.data.code == 2003) {
                  // 支付密码错误,重新输入
                  this.payarr = "";
                  this.$emit("changePopupSpecs", true);
                }
              })
              .catch(() => {
                if (response.data.code == 2001) {
                  // 商城支付密码设置未开启
                } else if (response.data.code == 2002) {
                  // 用户未设置支付密码
                } else if (response.data.code == 2003) {
                  // 支付密码错误
                }
              });
          }
        });
    },
    clickPayRadio(btn){
      this.radio = btn.value;
      if(btn.value == 103) {
        // 钱包app 币种
        this.getCurrency();
      }
    },
    async getCurrency(){
      //获取币种列表
      let { result, msg, data } = await $http.get("plugin.love-speed-pool.frontend.wallet-pay.get-currency",{},".");
      if (result == 0) return this.$toast(msg);
      this.walletCurrency = data;
      this.radioCurrency = data[0];
      this.$parent.radioCurrency = data[0];
      this.walletCurrencyShow = true;//显示币种选择弹窗
    },
    changeRadioCurrency(e){
      this.$parent.radioCurrency = e;
    },
    async getPayQR() {
      switch (this.radio) {
      case 85:
        this.payQRInfo = {
          url: 'order.merge-pay.leshua-alipay',
          qrLinkPath: 'pay_msg.link',
          text: '支付宝'
        };
        break;
      case 57:
        this.payQRInfo = {
          url: 'order.merge-pay.wechat-native',
          qrLinkPath: 'code_url',
          text: '微信'
        };
        break;
      case 2:
        this.payQRInfo = {
          url: 'order.merge-pay.alipay',
          qrLinkPath: '',
          extinfo: {
            scan_pay: 1
          },
          text: '支付宝'
        };
        break;
      case 120:
        this.payQRInfo = {
          url: 'order.merge-pay.huibei-code-pay',
          qrLinkPath: 'qrcode',
          extinfo: {},
          text: '惠呗支付'
        };
        break;
      default:
        break;
      }
      let _params = {
        order_pay_id: this.order_pay_id
      };
      if(this.payQRInfo.extinfo) _params = {..._params,...this.payQRInfo.extinfo};
      let { result, msg, data } = await $http.get(this.payQRInfo.url,_params,".");
      if (result == 0) return this.$toast(msg);
      QRCode.toCanvas(document.getElementById("qrPay-canvas"), data[this.payQRInfo.qrLinkPath]||data, error => {
        if (error) {
          console.log(error);
          this.$toast(`生成${this.payQRInfo.text}支付二维码失败！`);
        } else {
          this.isCodeQRPay = true;
        }
      });
      // 轮询查询订单状态
      this.pollOrderStatus(this.order_pay_id);
    },
    pollOrderStatus(paymentId) {
      // 轮询查询订单状态的逻辑
      // 使用定时器每隔一段时间调用查询接口，直到订单支付状态改变
      this.intervalPayQR = setInterval(() => {
        // 调用查询接口
        this.checkOrderStatus(paymentId)
          .then((data) => {
            if (data.status) {
              // 订单支付状态已改变，执行回调
              clearInterval(this.intervalPayQR); // 停止轮询
              this.handlePaymentSuccess();
            }
          })
          .catch((error) => {
            this.$dialog.alert({ message: '查询订单状态失败' });
            console.error('查询订单状态失败', error);
            clearInterval(this.intervalPayQR); // 停止轮询
          });
      }, 2500); // 每隔2.5秒查询一次订单状态
    },
    async checkOrderStatus(paymentId) {
      // 查询订单状态的逻辑
      let { result, msg, data } = await $http.get('order.merge-pay.check-order-pay',{order_pay_id: paymentId},".");
      // 返回一个Promise，处理接口请求成功和失败的情况
      return new Promise((resolve, reject) => {
        // 调用查询订单状态接口
        if(result == 1) return resolve(data);
        this.$toast(msg);
        reject();
      });
    },
    handlePaymentSuccess() {
      // 订单支付成功后的回调逻辑
      this.outLogin();
      window.localStorage.removeItem("share_path");
      this.$dialog.alert({
        message: '订单支付成功',
      }).then(() => {
        this.$router.replace(this.fun.getUrl("home", {},{mid: 0}));
      });
    },
    async outLogin(){
      let { result, msg, data } = await $http.get('member.logout.index',{},".");
      if (result == 0) return this.$toast(msg);
      this.$store.commit("savemodel", {});
      window.localStorage.setItem("token", "");
      window.localStorage.setItem("loginUid", "");
      window.localStorage.removeItem('uid');
      window.firstLogin = 0;
      clearLoginData(); // 方法在index.html
    }
  }
};
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
  .newSubTn {
    width: 80%;
    height: 3rem;
    position: fixed;
    bottom: 1rem;
    left: 10%;
    border-radius: 0.3rem;
    background-color: #f15353;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .mod_btns {
    margin: 0 0.3125rem;
    border-bottom: solid 1px #f4f4f4;
    text-align: left;
    padding-bottom: 0.875rem;
    padding-top: 0.875rem;
    padding-left: 0.5625rem;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .fa {
      font-size: 18px;
      color: #999;
    }

    .mod_btn {
      display: flex;
      align-items: center;
      flex: 1;
    }
  }

  .mod_btns:last-child {
    border-bottom: none;
  }

  .icon-pay_quick {
    color: #46e0d1;
    font-size: 28px;
    margin-right: 1rem;
  }

  .icon-pay_alipay {
    color: #29a1f7;
    font-size: 28px;
    margin-right: 1rem;
  }

  .icon-pay_yue {
    color: #ff7433;
    font-size: 28px;
    margin-right: 1rem;
  }
  .icon-guizhouyinhangjuhezhifu{
    color: #FF3333;
    font-size: 28px;
    margin-right: 1rem;
  }

  .icon-pay_wechat {
    color: #09bb07;
    font-size: 28px;
    margin-right: 1rem;
  }

  .icon-pay_otherpay {
    color: #ffba00;
    font-size: 28px;
    margin-right: 1rem;
  }

  .icon-pay_remittance {
    color: #ff692f;
    font-size: 28px;
    margin-right: 1rem;
  }

  .icon-pay_utsd {
    color: #9000ff;
    font-size: 28px;
    margin-right: 1rem;
  }

  .icon-pay_prepay {
    color: #9000ff;
    font-size: 28px;
    margin-right: 1rem;
  }

  .icon-pay_default,.icon-lakala {
    color: #538ff9;
    font-size: 28px;
    margin-right: 1rem;
  }

  .icon-pay_cashondelivery {
    color: #ed3800;
    font-size: 24px;
    margin-right: 1rem;
  }

  .icon-fontclass-daifu1 {
    color: #f15353;
    font-size: 24px;
    margin-right: 1rem;
  }

  .icon-fontclass-saomazhifu {
    color: #f4a556;
    font-size: 24px;
    margin-right: 1rem;
  }

  .ispaskey {
    .van-number-keyboard {
      position: relative;
    }
  }

  #alipay-detail {
    background: rgba(0, 0, 0, 0.8);
    height: 100%;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 100;

    img {
      width: 100%;
      position: relative;
      top: -2.5rem;
    }
  }

  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;

    .block {
      width: 14rem;
      height: 18rem;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .pcStyle {
    width: 375px;
    margin: 0 auto;
    left: 50% !important;
    margin-left: -187.5px;
  }

  .wallet-currency-group {
    text-align: left;
    max-height: 15rem;
    min-height: 10rem;
    overflow: scroll;

    .van-cell-group::after {
      border: none;
    }
  }
</style>